<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加操作</title>
    <script>
        function f1(){
            let a = document.getElementById("a");

            // 1.创建一个div标签
            let d = document.createElement("div");
            // 2.创建div标签体的文本内容
            let text = document.createTextNode("这是新增的div")
            // 3.将创建的文本节点添加到元素节点div中的标签体的末尾
            d.appendChild(text);

            // 将div放到超链接的标签体的末尾
            // a.appendChild(d);

            // 将div放在超链接之前
            // 放置后,div与超链接都属于body的子节点
            let b = document.getElementById("b");
            // b.insertBefore(d,a);

            // 使用div替换原有的超链接
            b.replaceChild(d,a);
        }
    </script>
</head>
<body id="b">
<a href="javascript:;" onclick="f1()" id="a">
    超链接
</a>
</body>
</html>